<template>
  <div>
    <el-table
      ref="FBATable"
      border
      :data="data"
      :span-method="spanMethod"
      :max-height="height"
      :header-cell-style="
        showHeaderStyle
          ? { background: '#f1f2f7', color: '#333' }
          : { background: 'none' }
      "
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
    >
      <el-table-column
        type="selection"
        v-if="showCheckBox"
        width="55"
      ></el-table-column>
      <el-table-column type="index" v-if="showIndex" width="55" label="序号">
      </el-table-column>
      <el-table-column
        v-for="(col, index) in rowHeader"
        :key="index"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :fixed="col.fixed"
        :align="col.align"
      >
        <template slot-scope="scope">
          <ex-slot
            v-if="col.render"
            :render="col.render"
            :row="scope.row"
            :index="scope.$index"
            :column="col"
          >
          </ex-slot>
          <span v-else>
            {{ scope.row[col.prop] }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-end" v-if="isPagination">
      <el-pagination
        :hide-on-single-pageInfo="false"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-pageInfo="PaginationData.currentPage"
        :pageInfo-sizes="[10, 20, 50, 100]"
        :pageInfo-size="PaginationData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="PaginationData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
// 自定义内容的组件
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },

  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    }

    if (data.props.column) params.column = data.props.column
    return data.props.render(h, params)
  }
}
export default {
  name: 'FBATable',
  components: {
    'ex-slot': exSlot
  },
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表头数据
    rowHeader: {
      type: Array,
      default: () => {
        return []
      }
    },
    showCheckBox: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    showIndex: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    height: {
      type: String,
      default: () => {
        return 'auto'
      }
    },
    spanMethod: {
      type: Function,
      default: () => {
        return ''
      }
    },
    PaginationData: {
      type: Object,
      default: () => ({
        currentPage: 1,
        pageSize: 10,
        total: 0
      })
    },
    isPagination: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    showHeaderStyle: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('getSelection', val)
    },
    handleRowClick(row) {
      this.$emit('rowClick', row)
    },
    // 	pageSize 改变时会触发
    handleSizeChange(val) {
      this.$emit('pageSizeChange', val)
    },
    // currentPage 改变时会触发
    handleCurrentChange(val) {
      this.$emit('pageCurrentChange', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.tableHeader {
  background: #1890ff;
}
.pagination-end {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
